<div class="mar-st-a30">
	<div class="hr-20"></div>
	<table style="width: 100%">
		<tbody>
			<tr class="bg-bl-q">
				<th class="text-center"><h4>可选应用</h4></th>
				<th>&nbsp;</th>
				<th class="text-center"><h4>已选应用</h4></th>
			</tr>
		</tbody>
		<tbody class="bordered">
			<tr>
				<td width="45%"> <!-- 可选应用左空间  -->
					<ul class="selectable ui-selectable" id="appSelectable">
					<!-- 模板引擎for语句  -->
						{{#noLinkAppMain}}
						<li id="selectLi{{id}}" style="width: 160px; height: 160px">
							<img id="appIcon{{id}}" data-toggle="modal" href="#" onclick="selectApp('{{id}}')"
								src="{{ctx}}/mam/attachment/download/{{icon}}" class="ui-selectee img-rounded info-icon"
								style="width: 80px; height: 80px; cursor: pointer" />
							<p class="ui-selectee">{{app_name}}</p>
							<p class="mar-st-b20">
								<p class="ui-selectee">{{identifier}}</p>
							</p>
						</li>
						<script type="text/javascript">
							var icon = "{{icon}}";
							if (icon != "") {
								jQuery("#appIcon{{id}}").attr("src", "{{ctx}}/mam/attachment/download/{{icon}}");
							} else {
								jQuery("#appIcon{{id}}").attr("src", "{{ctx}}/static/bsl/images/defind.png");
							}
						</script>
						{{/noLinkAppMain}}
					</ul>
				</td> <!-- 中间工具 <、>  -->
				<td class="cursor-st text-center">
					<a class="hover" id="addApphover" href="javascript:addApp()">&gt;</a> <br>
					<img src="{{ctx}}/static/bsl/images/loadImage.gif" border="0" style="display: none; 
						width: 50px; height: 50px" alt="loading..." id="load"/> 
					<a href="javascript:deleteApp()" id="deleteApphover">&lt;</a>
				</td>
				<td width="45%"> <!-- 可选应用右空间  -->
					<ul class="selectable ui-selectable" id="hasAppSelectabler">
						{{#linkAppMain}}
						<li id="selectLi{{id}}" style="width: 160px; height: 160px">
							<img id="appIcon{{id}}" src="{{ctx}}/static/bsl/images/icon_06.png" class="ui-selectee img-rounded info-icon" 
								style="width: 80px; height: 80px; cursor: pointer" onclick="selectAppMainDelete('{{id}}')" />
							<p class="ui-selectee">{{app_name}}</p>
							<p class="mar-st-b10">
								<p class="ui-selectee">{{identifier}}</p>
							</p>
						</li>
						<script type="text/javascript">
							var icon = "{{icon}}";
							if (icon != "") {
								jQuery("#appIcon{{id}}").attr("src", "{{ctx}}/mam/attachment/download/{{icon}}");
							} else {
								jQuery("#appIcon{{id}}").attr("src", "{{ctx}}/static/bsl/images/defind.png");

							}
							$("#delete_widgetversionselect{{id}} option[value='{{discription}}']").attr("selected", true);
						</script>
						{{/linkAppMain}}
					</ul>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<script>
	var appRelationships = {};
	var appDisRelationships = {};
	
	// 选择组件右移，即 点击图片，此时还没有发生请求，只是放到数组中缓存
	function selectApp(widgetId) {
		var classList = $('#appSelectable').find('#selectLi' + widgetId).attr("class");
		if (classList && classList == "ui-selecting") { // 选中状态
			// 去除节点,反选模块
			delete appRelationships[widgetId];
			$('#appSelectable').find('#selectLi' + widgetId).removeClass("ui-selecting");
		} else { // 未选中
			//添加选中状态,加入到数据队列
			$('#appSelectable').find('#selectLi' + widgetId).attr("class", "ui-selecting");
			appRelationships[widgetId] = widgetId;
		}
	};
	
	// 选择组件左移，即 点击图片，此时还没有发生请求，只是放到数组中缓存
	function selectAppMainDelete(widgetId) {
		var classList = $('#hasAppSelectabler').find('#selectLi' + widgetId).attr("class");
		if (classList && classList == "ui-selecting") { // 选中状态
			//去除节点,反选模块
			delete appDisRelationships[widgetId];
			$('#hasAppSelectabler').find('#selectLi' + widgetId).removeClass("ui-selecting");
		} else { // 未选中
			//添加选中状态,加入到数据队列
			$('#hasAppSelectabler').find('#selectLi' + widgetId).attr("class", "ui-selecting");
			appDisRelationships[widgetId] = widgetId;
		}
	}
	
	// 当点击中间>箭头时，促发请求，把数组中的数据 组合 发送请求
	function addApp() {
		var datas = [];
		for (var key in appRelationships) { 
			if(appRelationships.hasOwnProperty(key)) // 先判断是不是自己的属性
				datas.push(appRelationships[key]);
		}
		if (datas.length == 0) {
			bootbox.alert("请选择应用");
			return;
		}
		$.ajax({
			url : "{{ctx}}/mam/appMain/{{appId}}/appLinks",
			type : 'PUT',
			data : JSON.stringify(datas),
			dataType : "json",
			contentType : 'application/json; charset=utf-8',
			success : function(resultData) {
				if (resultData.result == "success") {
					$('#load').show();
					reloadPanel2('{{appId}}');
				} else {
					bootbox.alert("应用加载失败，请稍后再试！");
				}
			},
			error : function() {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		});
	}
	
	// 当点击中间<箭头时，促发请求，把数组中的数据 组合 发送请求
	function deleteApp() {
		var datas = [];
		for (var key in appDisRelationships) {
			if(appDisRelationships.hasOwnProperty(key)) // 先判断是不是自己的属性
				datas.push(appDisRelationships[key]);
		}
		if (datas.length == 0) {
			bootbox.alert("请选择应用");
			return;
		}
		$.ajax({
			url : "{{ctx}}/mam/appMain/{{appId}}/appUnlinks",
			type : 'PUT',
			data : JSON.stringify(datas),
			dataType : "json",
			contentType : 'application/json; charset=utf-8',
			success : function(resultData) {
				if (resultData.result == "success") {
					$('#load').show();
					reloadPanel2("{{appId}}");
				} else {
					bootbox.alert("取消应用关联失败，请稍后再试！");
				}
			},
			error : function() {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		});
	}
</script>